<template>
  <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="100px" class="w-100">
    <el-row :gutter="20">
      <el-col :span="item.col || 8" v-for="item in props.column" :key="item.id">
        <el-form-item :label="item.label + ':'" class="el-col" :prop="item.id">
          <!-- 输入框无限制 -->
          <el-input
            v-if="item.type === 'input'"
            :disabled="item.disabled"
            v-model="form.model[item.id]"
            :placeholder="item.placeholder || '请输入' + item.label"
            clearable
          >
          </el-input>
          <!-- 日期格式 -->
          <el-date-picker
            v-else-if="item.type === 'date'"
            :disabled="item.disabled"
            class="date-picker"
            type="date"
            v-model="form.model[item.id]"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :placeholder="item.placeholder || '请输入' + item.label"
            clearable
          >
          </el-date-picker>
          <!-- textarea -->
          <el-input
            v-else-if="item.type === 'textarea'"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="form.model[item.id]"
            :placeholder="item.placeholder || '请输入' + item.label"
            clearable
          />
          <!-- switch -->
          <el-switch v-else-if="item.type === 'switch'" v-model="form.model[item.id]" clearable />
          <!-- 自定义下拉 -->
          <z-select
            v-else-if="item.type === 'z-select'"
            v-model="form.model[item.id]"
            clearable
            class="w-100"
            :api="item.api"
            :apiParams="item.apiParams"
            :options="item.options"
            :placeholder="item.placeholder || '请输入' + item.label"
          ></z-select>
          <!-- 纯展示 -->
          <template v-else-if="item.type === 'text'">
            {{ form.model[item.id] }}
          </template>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import { post } from '@/api/index.js';
let route = useRoute();
let router = useRouter();
let { purview, debounce } = inject('$global');
let message = inject('$message');
let props = defineProps({
  column: {
    type: Array,
    default: () => {
      return [];
    }
  }
});
let formRef = ref();
let form = reactive({
  rules: {},
  model: {}
});
watch(
  () => props.column,
  val => {
    // 需要重置
    form.rules = {};
    form.model = {};

    // 验证项
    val.map(row => {
      form.model[row.id] = row.value;
      if (row.required) {
        let obj = { required: true, trigger: 'change', message: `${row.label}不能为空!` };
        form.rules[row.id] = [obj];
      }
    });
    if (formRef.value) {
      formRef.value.validate();
      setTimeout(() => {
        formRef.value.clearValidate();
      }, 0);
    }
  },
  { immediate: true }
);
// 解决数据没办法双向绑定的问题。
watch(
  () => form.model,
  val => {
    debounce(() => {
      Object.keys(val).map(r => {
        props.column.find(row => row.id === r).value = val[r];
      });
    });
  },
  { immediate: true, deep: true }
);
const check = async () => {
  if (!formRef.value) return;
  let res = await formRef.value.validate(val => val);
  if (!res) return false;
  let obj = {};
  Object.keys(form.model).map(r => {
    obj[r] = Array.isArray(form.model[r]) ? JSON.stringify(form.model[r]) : form.model[r];
  });
  return obj;
};
defineExpose({
  check
});
</script>
<style lang="scss" scoped></style>
